<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<body>
<form class="bv-form" id="userForm"  role="form" method="post" action="user/save">
    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="col-xs-6" >
                    <label class="control-label" for="nickName">名字:</label>
                    <input type="text" class="form-control" name="nickName" id="nickName"  placeholder="请输入名字" />
                </div>
                <div class="col-xs-6">
                    <label for="login">账号:</label>
                    <input type="text" class="form-control" name="login" id="login"  placeholder="请输入账号" />
                </div>
            </div>
            <div class="row" style="margin-top: 10px;">
                <div class="col-xs-6" >
                    <label for="pass">密码:</label>
                    <input type="password" class="form-control" name="pass" id="pass"  placeholder="请输入密码" />
                </div>
                <div class="col-xs-6" >
                    <label for="repassword">核对密码:</label>
                    <input type="password" class="form-control" name="repassword" id="repassword"  placeholder="请输入密码" />
                </div>
            </div>
            <div class="form-inline" style="margin-top: 20px;" id="roleList">
                <label>所属权限:</label>
            </div>
        </div>

    </div>
</form>
<script th:inline="javascript">
    <![CDATA[
    $(function () {
        $('#userForm',window.top.document).bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                nickName: {
                    message: '名字验证失败',
                    validators: {
                        notEmpty: {
                            message: '名字不能为空'
                        } ,
                        stringLength: {
                            min: 2,
                            max: 30,
                            message: '名字长度必须在2到30之间'
                        }
                    }
                },
                login: {
                    message: '账号验证失败',
                    validators: {
                        notEmpty: {
                            message: '账号不能为空'
                        },
                        stringLength: {
                            min: 6,
                            max: 30,
                            message: '账号长度必须在6到30之间'
                        },
                        threshold :  6 , //有6字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，6字符以上才开始）
                        remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}
                            url: "/user/isExist",//验证地址
                            data:function(validator) {// 获取需要传送到后台的验证的数据
                                return {
                                    login:$('#login').val()
                                }
                            },
                            message: '账号已存在',//提示消息
                            delay :  500,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
                            type: 'POST'//请求方式
                        }
                    }
                },
                pass: {
                    message:'密码无效',
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        },
                        stringLength: {
                            min: 6,
                            max: 30,
                            message: '密码长度必须在6到30之间'
                        },
                        identical: {//相同
                            field: 'pass', //需要进行比较的input name值
                            message: '两次密码不一致'
                        },
                        different: {//不能和用户名相同
                            field: 'login',//需要进行比较的input name值
                            message: '不能和用户名相同'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_\.]+$/,
                            message: '密码必须是数字字母和下划线不能有特殊符号！'
                        }
                    }
                },
                repassword: {
                    message: '密码无效',
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        },
                        stringLength: {
                            min: 6,
                            max: 30,
                            message: '密码长度必须在6到30之间'
                        },
                        identical: {//相同
                            field: 'pass',
                            message: '两次密码不一致'
                        },
                        different: {//不能和用户名相同
                            field: 'login',
                            message: '不能和用户名相同'
                        },
                        regexp: {//匹配规则
                            regexp: /^[a-zA-Z0-9_\.]+$/,
                            message: '密码必须是数字字母和下划线不能有特殊符号！'
                        }
                    }
                }
            }
        })

        // 绑定dialog的确定按钮的监听事件
        $("#btnOk",window.top.document).click(function() {
            $("#btnOk",window.top.document).attr("disabled",true);
            // 此段是为防止需要点击两次按钮来实现验证的方法，若不添加此处的放行，那么我们将要点击两次确定按钮才可以提交验证
            var login = $("#login",window.top.document).val();
            // 判断当前的code又值，且当前不存在错误验证方可放开该字段的验证
            if(login != null && login != ""&&$("#login",window.top.document).parent("div").find('.glyphicon-remove').length==0){
                $('#userForm',window.top.document).bootstrapValidator('enableFieldValidators', 'login', false);
            } else {
                $('#userForm',window.top.document).bootstrapValidator('enableFieldValidators', 'login', true);
            }
            var bootstrapValidator = $("#userForm", window.top.document).data('bootstrapValidator');
            bootstrapValidator.validate();
            if(bootstrapValidator.isValid()){
                $.post($("#userForm",window.top.document).attr('action'),$("#userForm",window.top.document).serialize(),function(e){
                    if(e.result){
                        // jquery 调用刷新当前操作的table页面的refresh方法
                        refreshDoQuery()
                        window.Ewin.alert({message:'增加数据成功!'});
                    }else{
                        window.Ewin.alert({message:'增加数据失败!'});
                    }
                    $("#btnOk",window.top.document).attr("disabled",false);
                })
            }else{
                $("#btnOk",window.top.document).attr("disabled",false);
            }

        });

        // 重新刷新当前查询页的数据
        function refreshDoQuery(){
            var iframes = $(window.parent.document).contents().find(".J_iframe");
            for(var i=0;i<iframes.length;i++){
                 if($(iframes[i]).css("display")=='inline'){
                     $('.modal-dialog', window.top.document).parent('div').remove()
                     $('body', window.top.document).find('.modal-backdrop').remove();
                     iframes[i].contentWindow.doQuery();
                     break;
                 }
            }
        }

        $.fn.checkbox({
            url:"/user/loadRoles",
            id:"roleList",
            val:"id",
            showVal:"nickName",
            name:"roleArray"
        });

    })
    ]]>
</script>
</body>
</html>